<template>
    <div class="cl-button" :class="getClass" @click="handleClick" v-on:mouseenter="mouseEnter" v-on:mouseleave="mouseLeave">
        <img v-if="iconLocation === 'left'" :src="icon" class="left" alt="">
        <span>{{ disableHtml ? '' : html }}<slot></slot></span>
        <img v-if="iconLocation === 'right'" :src="icon" class="right" alt="">
    </div>
</template>

<script>
export default {
    name: 'ClButton',
    props: {
        type: {
            type: String,
            default: 'default'
        },
        pattern: {
            type: String,
            default: 'default'
        },
        size: {
            type: String,
            default: 'small'
        },
        customize: String,
        shadow: Boolean,
        focus: Boolean,
        disableHtml: Boolean
    },
    data() {
        return {
            style: '',
            hover: false,
            click: false,
            html: '',
            icon: '',
            iconNormal: '',
            iconFocus: '',
            iconLocation: ''
        }
    },
    mounted() {
        this.determineStyle()
        this.determineIcon()

        this.click = this.focus
    },
    methods: {
        handleClick(evt) {
            this.$emit('click', evt)
        },
        mouseEnter() {
            this.hover = true
            this.icon = this.iconFocus
        },
        mouseLeave() {
            this.hover = false
            if (!this.click) this.icon = this.iconNormal
        },
        determineStyle() {
            switch (this.type) {
                case 'filter':
                    this.style = 'no-border'
                    this.html = '筛选'
                    break

                case 'apply':
                    this.style = 'default'
                    this.html = '开户申请'
                    break

                case 'register':
                    this.style = 'default'
                    this.html = '开户登记'
                    break

                case 'multiRegister':
                    this.style = 'default'
                    this.html = '批量登记'
                    break

                case 'stash':
                    this.style = 'primary'
                    this.html = '暂存列表'
                    break

                case 'import':
                    this.style = 'primary'
                    this.html = '导入'
                    break

                case 'submit':
                    this.style = 'primary'
                    this.html = '提交'
                    break

                case 'add':
                    this.style = 'primary'
                    this.html = '新增'
                    break

                case 'delete':
                    this.style = 'warn'
                    this.html = '删除'
                    break

                case 'refresh':
                    this.style = 'default'
                    this.html = '刷新'
                    break

                case 'more':
                    this.style = 'default'
                    break

	              case 'down':
	                this.style = 'default'
	                this.html = '下载'
	                break

                case 'alter':
                    this.style = 'default'
                    this.html = '修改'
                    break

                default:
                    this.style = this.pattern
                    break
            }
        },
        determineIcon() {
            if (this.type === 'more') {
                this.iconLocation = 'right'
            } else if (this.type !== 'default') {
                this.iconLocation = 'left'
            } else {
                this.iconLocation = ''
            }

            if (this.type !== 'default') {
                this.icon = this.iconNormal = require(`../assets/button-icon/${this.type}.png`)
                this.iconFocus = require(`../assets/button-icon/${this.type}_s.png`)
            }
        }
    },
    computed: {
        getClass() {
            return [
                this.styleClass,
                this.sizeClass,
                this.customize,
                this.shadow ? 'cl-button-shadow' : '',
                this.hover ? this.statusClass : '',
                this.click ? this.statusClass : ''
            ]
        },
        styleClass() {
            return 'cl-button-' + this.style
        },
        sizeClass() {
            return 'cl-button-' + this.size
        },
        statusClass() {
            return this.styleClass + '-status'
        }
    },
    watch: {
        focus() {
            this.click = this.focus
            if (this.click) this.icon = this.iconFocus
            else this.icon = this.iconNormal
        },
        pattern() {
            this.style = this.pattern
        }
    }
}
</script>

<style lang="less" scoped>
    @import "../assets/css/button.less";
</style>
